<template>
	<view>
		<view class="bgWhite ptb25">
			<!-- 个人信息 -->
			<view class="align-center justify-between">
				<view class="align-center pl15">
					<view>
						<image class="radius50" :src="userInfo.avatar" style="width: 100rpx;height: 100rpx;"></image>
					</view>
					<view class="ml10">
						<view class="pb10">
							<view class="ft15 bold mr10"><text>{{userInfo.nickname}}</text></view>
						</view>
						<view class="align-center">
							<view class="ft12 gray6 mr10"><text>{{$t('common').电话}}:{{userInfo.phone}}</text></view>
							<image @click.stop="bdpop=true" src="../../../static/images/index/hongdianhua.png"
								mode="aspectFill" style="width: 24rpx;height: 24rpx;"></image>
						</view>
					</view>
				</view>
				<view class="byuan ft12 white tc" :style="{width:(lang=='en')?'220rpx':'172rpx'}"
					@click="navTo(`/pages/fans/fans-detail?uid=${userInfo.id}`)">
					<text>{{$t('common').查看粉丝详情}}</text>
				</view>
			</view>
		</view>
		<!-- 已结算销售额统计 -->
		<view class=" mt12 plr12">
			<view class="bgWhite radius8 plr15 pt15 pb5">
				<view class="gray3 ft15 bold pb10">
					<text>{{$t('fan').已结算销售额统计}}</text>
				</view>
				<view class="flex-wrap">
					<view class="ptb10" style="flex-basis: 50%;">
						<view class="ft12 gray6 pb10"><text>{{$t('fan').本月已结算销售额}}</text></view>
						<view class="ft18 gray3 bold">
							<text>{{parseFloat(totalData.new_f_valued || 0).toLocaleString()}}</text>
						</view>
					</view>
					<view class="ptb10" style="flex-basis: 50%;">
						<!-- <view class="ft12 gray6 pb10"><text>{{$t('fan').预估截止本月末结算销售额}}</text></view> -->
						<view class="ft12 gray6 pb10"><text>{{$t('fan').预估本月结算销售额}}</text></view>
						<view class="ft18 gray3 bold">
							<text>{{parseFloat(totalData.total_amt_consumed || 0).toLocaleString()}}</text>
						</view>
					</view>
					<view class="ptb10" style="flex-basis: 50%;">
						<view class="ft12 gray6 pb10"><text>{{$t('fan').预计未来7天结算销售额}}</text></view>
						<view class="ft18 gray3 bold">
							<text>{{parseFloat(totalData.seven_amt_consumed || 0).toLocaleString()}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 本月已结算销售额趋势 -->
		<view class="plr12 mt12 ">
			<view class="bgWhite pt15 plr15 radius8">
				<view class="ft15 gray3 bold"><text>{{$t('fan').本月已结算销售额趋势}}</text></view>
				<view class="">
					<qiun-data-charts type="line" :opts="opts" :chartData="mchartData" fontSize="12" />
				</view>
			</view>
		</view>
		<!-- 近30天已结算销售额趋势 -->
		<view class="plr12 mt12 ">
			<view class="bgWhite pt15 plr15 radius8">
				<view class="ft15 gray3 bold"><text>{{$t('fan').近30天已结算销售额趋势}}</text></view>
				<view class="">
					<qiun-data-charts type="line" :opts="opts" :chartData="vchartData" fontSize="12" />
				</view>
			</view>
		</view>
		<u-popup :show="bdpop" mode="center" round="10" :safeAreaInsetBottom="false">
			<view class="qx-box">
				<view v-if="userInfo.area_code=='+86'" class="qx-text">{{$t('fandetail').确定拨打电话}}：{{userInfo.phone}}？
				</view>
				<view v-if="userInfo.area_code!='+86'" class="qx-text">
					{{$t('fandetail').确定拨打国际电话}}：{{userInfo.area_code}}
					{{userInfo.phone}}{{$t('fandetail').吗受运营商限制请确认您已开通国际长途业务如未开通将拨打失败}}
				</view>

				<view class="qx-bot align-center">
					<view class="qx-btn" style="border-right: 1rpx solid #EEEEEE;" @click="bdclose()">
						{{$t('common').取消}}
					</view>
					<view class="qx-btn" @click="bdconfirm()">{{$t('common').确认}}</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bdpop: false,
				mchartData: {},
				vchartData: {},
				opts: {
					color: [],
					padding: [30, 25, 10, 15],
					dataLabel: false,
					dataPointShapeType: 'solid',
					enableScroll: false,
					fontSize: 10,
					legend: {
						show: false,

					},
					xAxis: {
						disableGrid: true,
						calibration: true,
						rotateLabel: true,
						fontSize: 10,
						labelCount: 4,
						marginTop: 10
					},
					yAxis: {
						// disabled:true,
						gridType: "dash",
						dashLength: 10,
						data: [{
							titleOffsetY: -20,
							axisLine: false,
							textAlign: "right",
							// min: 0,
							// max: 4900
						}]
					},
					extra: {
						tooltip: {
							legendShow: false,
							bgColor: "#333333",
							borderRadius: 4,
							legendShow: false
						},
						line: {
							type: "straight",
							width: 2,
							activeType: "hollow",
						},

					}
				},
				uid: '',
				totalData: {}, //总的信息
				userInfo: {}, //用户信息
				monthcategories: [], //本月已结算销售额趋势
				monthseriesData: [], //本月已结算销售额趋势
				vicinitycategories: [], //近30天已结算销售额趋势
				vicinityseriesData: [], //近30天已结算销售额趋势
			}
		},
		onReady() {
			this.getServerData();
		},
		onLoad(options) {
			this.uid = options.uid
			this.settl_trendAPI()
			this.moonexamineAPI()
		},
		computed: {
			lang() {
				return this.$store.state.lang
			}
		},
		methods: {
			// 本月考核
			async moonexamineAPI() {
				const res = await this.$api.moonexamine({
					uid: uni.getStorageSync('userInfo').id,
				})
				if (res && res.code == 1) {
					if (res.data.list.length < 0 && res.data.homne < 0) {
						uni.reLaunch({
							url: '/pages/login/Nopermission'
						})
					}
				}
			},
			getServerData() {
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let mres = {
						categories: this.monthcategories,
						series: [{
							name: this.$t('common').已结算销售额,
							data: this.monthseriesData
						}, ],
					};
					let vres = {
						categories: this.vicinitycategories,
						series: [{
							name: this.$t('fan').近30天已结算销售额,
							data: this.vicinityseriesData
						}, ],
					};
					this.mchartData = JSON.parse(JSON.stringify(mres));
					this.vchartData = JSON.parse(JSON.stringify(vres));
				}, 500);
			},
			async settl_trendAPI() {
				const res = await this.$api.settl_trend({
					uid: this.uid, //327719
				})
				this.totalData = res.data
				this.userInfo = res.data.userinfo
				res.data.settl_moon_list.forEach((item, index) => {
					this.monthcategories.push(item.date)
					this.monthseriesData.push(item.total_amt_award)
				})
				res.data.settl_list30.forEach((item, index) => {
					this.vicinitycategories.push(item.date)
					this.vicinityseriesData.push(item.total_amt_award)
				})
			},
			// 打电话
			callPhone() {
				uni.makePhoneCall({
					phoneNumber: this.userInfo.phone
				});
			},
			bdconfirm() {
				this.bdpop = false
				this.callPhone()
			},
			bdclose() {
				this.bdpop = false
			}
		},
	}
</script>

<style>
	.byuan {

		height: 40rpx;
		background: #F44A42;
		border-radius: 100rpx 0rpx 0rpx 100rpx;
		line-height: 40rpx;
	}

	.qx-box {
		width: 600rpx;
		// height: 246rpx;
		background: #ffffff;
		border-radius: 10rpx;

		.qx-text {
			color: #2A2A2A;
			font-size: 30rpx;
			padding: 56rpx 40rpx;
			text-align: center;
		}

		.qx-bot {
			border-top: 2rpx solid #EEEEEE;

			.qx-btn {
				width: 50%;
				height: 92rpx;
				text-align: center;
				line-height: 80rpx;
				color: #2A2A2A;
				font-size: 30rpx;
			}
		}
	}
</style>